<template>
  <Modal v-model="visible" width="840" class="source-model">
      <div class="source-menu">
        <h1>模板库</h1>
        <ul>
          <li class="active">
            全部模板
          </li>
        </ul>
      </div>
      <div class="source-content">
        <Tabs value="name1">
            <TabPane label="全部" name="name1">
              <div class="source-list">
                <div class="source-item" v-for="i in 20" @click="handlerAddTemplate">
                  <img src="http://oihdlfeky.bkt.clouddn.com/17-4-12/76284943-file_1491990447624_fe9a.png" alt="">
                </div>
              </div>
            </TabPane>
        </Tabs>
      </div>
    <div slot="footer"></div>
  </Modal>
</template>

<script>
import { Vue, Component, Watch, Model, Emit} from 'vue-property-decorator'
import ModalSync from "@/mixins/ModalSync"

import {
  State,
  Getter,
  Action
} from 'vuex-class'
@Component({
  mixins: [ModalSync]
})
export default class SourceTemplate extends Vue {
  @Action actAddElement
  visible=false
  handlerAddTemplate ():void {
    let newElement = {
      type: "template",
      data: {
        type: 'static',
        mapping: [],
        source: {
          goodsList: [{
            image: 'http://oihdlfeky.bkt.clouddn.com/17-4-12/76284943-file_1491990447624_fe9a.png',
            name: '商品名称',
            price: '32'
          }, {
            image: 'http://oihdlfeky.bkt.clouddn.com/17-4-12/76284943-file_1491990447624_fe9a.png',
            name: '商品名称',
            price: '32'
          }, {
            image: 'http://oihdlfeky.bkt.clouddn.com/17-4-12/76284943-file_1491990447624_fe9a.png',
            name: '商品名称',
            price: '32'
          }, {
            image: 'http://oihdlfeky.bkt.clouddn.com/17-4-12/76284943-file_1491990447624_fe9a.png',
            name: '商品名称',
            price: '32'
          }, {
            image: 'http://oihdlfeky.bkt.clouddn.com/17-4-12/76284943-file_1491990447624_fe9a.png',
            name: '商品名称',
            price: '32'
          }, {
            image: 'http://oihdlfeky.bkt.clouddn.com/17-4-12/76284943-file_1491990447624_fe9a.png',
            name: '商品名称',
            price: '32'
          }]
        },
        ajax: {
          url: ''
        }
      },
      extra: {
        template: `<%if(data.goodsList){%>
          <ul class="goods-list">
          <%for(var i=0;i <data.goodsList.length;i++){%>
            <li class="goods">
              <div class="goods-img"><img src="<%=data.goodsList[i].image%>" alt="" /></div>
              <p class="goods-name">
                <%=data.goodsList[i].name%>
              </p>
              <div class="goods-text">
                <span><var>￥</var><%=data.goodsList[i].price%></span>
                <button>立即购买</button>
              </div>
            </li>
            <%}%>
            </ul>
        <%}%>`,
        style: `.goods-list{
          overflow: hidden;
          width:100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          background:#fff;
        }

        .goods{
          width:260px;
          border: 1px solid #ddd;
          padding: 10px;
          margin-bottom:20px;
        }
        .goods-name{
          padding:20px 0;
          font-weight:bold;
          font-size:16px;
        }
        .goods-img{
          width:100%;
          height: 200px;
          overflow: hidden;
          text-align: center;
          line-height: 200px;
        }
        .goods-text{
          overflow: hidden;
          padding:5px 10px;
        }
        .goods-text button{
          float: right;
          background: #09c;
          border: 0;
          color: #fff;
          height: 32px;
          line-height: 32px;
          text-align: center;
          padding:3px 10px;
        }
        .goods-text span{
          float: left;
          color: #999;
          line-height: 32px;
        }`,
        scoped: false
      }

    }
    this.actAddElement(newElement)
    this.visible = false
  }
}

</script>
<style lang="less" scoped>
.source-img-model{

}
</style>
